<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>聊天框</title>
		<style type="text/css">
			/*#d1{
				width: 0px;
				height: 0px;
				background: saddlebrown;
				border-top: 200px solid transparent;
				border-bottom: 200px solid transparent;
				border-left: 200px solid transparent;
				border-right: 200px solid #8B4513;
			}*/
			.chat{
				width: 500px;
				line-height: 100px;
				padding: 30px;
				font-size:30px;
				background: lawngreen;
				margin: 0 auto;
				border-radius: 30px;
				position: relative;
			}
			.chat:before{
				content: "";
				display: inline-block;
				width: 0px;
				height: 0px;
				/*background: #8B4513;*/
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 80px solid transparent;
				border-right: 80px solid lawngreen;
				position:absolute;
				left: -160px;
				top: 25px;
			}
			.chat:after{
				content: "";
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div class="chat">
			吃饭了吗？
		</div>
	</body>
</html>
